<template>
  <div style="position: relative;">
    <!-- 头部 -->
    <myDivider name="报事详情"></myDivider>
    <el-page-header @back="goBack">
    </el-page-header>

    <div class="selectBtn" v-if="scene == '未处理'">
      <el-popover placement="bottom" width="60px" trigger="click">
        <div style="width:50px;cursor: pointer;">
          <div style="width: 100%;text-align: center;" @click="updateClick">编辑</div>
          <div style="width: 100%;text-align: center;margin-top: 20px;color: red;" @click="deleteClick">删除</div>
        </div>
        <i slot="reference" style="font-size: 34px;position: absolute;right: 135px;top: 100px;"
          class="el-icon-s-operation"></i>
      </el-popover>
    </div>

    <!-- 表单 -->
    <el-form ref="ruleForm" class="fromStyle" :model="formData" label-width="150px">
      <div style="display: flex;">
        <el-form-item label="报事日期：">
          <div style="width: 200px;">
            {{ formData.eventDay }}
          </div>
        </el-form-item>
        <el-form-item label="事件编号：">
          <div style="width: 200px;">
            {{ formData.eventsNumber }}
          </div>
        </el-form-item>
      </div>
      <div style="display: flex;">

        <el-form-item label="报事类型：">
          <el-input disabled style="width: 200px;" v-model="formData.categoryName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="服务类别：" v-if="formData.category == 1">
          <el-input disabled style="width: 200px;" v-model="formData.serviceCategoryName" placeholder=""></el-input>
        </el-form-item>
      </div>


      <el-form-item label="报事区域：">
        <el-input v-if="formData.isPublic == 0" disabled class="ok" :value="formData.residentialName + '/'
          + formData.residentialName + '/'
          + formData.unitCode + '/'
          + formData.floors + '/'
          + formData.roomName" placeholder=""></el-input>
        <el-input v-else disabled class="ok" :value="formData.residentialName + '/公共区域'" placeholder=""></el-input>
      </el-form-item>
      <div style="display: flex;">
        <el-form-item label="客户信息：">
          <el-input disabled style="width: 200px;" v-model="formData.customerName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="联系方式：">
          <el-input disabled style="width: 200px;" v-model="formData.phone" placeholder=""></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <!-- <el-form-item label="经办人：">
          <el-input disabled style="width: 200px;" v-model="formData.userName"></el-input>
        </el-form-item> -->
        <el-form-item label="报事方式：">
          <el-input disabled style="width: 200px;" :value="eventWayData[formData.eventWay]" placeholder=""></el-input>
        </el-form-item>
      </div>
      <el-form-item label="预约时间：">
        <el-input disabled class="ok" v-model="yysj" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="报事内容：">
        <el-input rows="5" type="textarea" disabled class="ok" v-model="formData.description" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="报事图片：">
        <div v-if="formData.imgs != null && formData.imgs.length > 0">
          <el-image v-for="item, i in formData.imgs" :key="i" style="width: 100px; height: 100px;margin-right: 10px;"
            :src="item" :preview-src-list="formData.imgs">
          </el-image>
        </div>
        <span style="color: #aaa;" v-else>无报事图片</span>
      </el-form-item>

    </el-form>

    <!-- 回复的表单 -->
    <div v-if="scene == '未处理'">
      <el-form ref="replyData" style="width: 1000px;" :model="replyData" label-width="150px">

        <el-form-item label="回复：">
          <el-input :rows="5" show-word-limit maxlength="300" type="textarea" class="ok" v-model="replyData.description"
            placeholder="请输入回复内容"></el-input>
        </el-form-item>
        <el-form-item label="">
          <MyUploadImgNotDetele :canUploadNum="3" :id="UploadId" v-if="ImgFileShow" @getImgList="getImgList"
            @deleteImgList="deleteImgList" uploadUrl="/business/events/uploadImg"> </MyUploadImgNotDetele>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button style="width: 110px;" @click="cancel">取消</el-button>
        <el-button style="width: 110px;" type="success" @click="goReply">发送回复</el-button>
        <el-button style="width: 110px;" type="primary" @click="goWorkOrder">事件派单</el-button>
      </div>
    </div>

    <!-- 已处理内容 -->
    <div v-else>

      <el-form style="width: 1000px;" :model="formData" label-width="150px">
        <el-form-item label="回复内容：" v-if="formData.replyDescription || formData.replyImages!=null">
          <span> {{ formData.replyDescription }}</span>
          <div style="display: flex;" v-if="formData.replyImages!=null">
            <el-image v-for="item, i in formData.replyImages" :key="i"
              style="width: 100px; height: 100px;margin-right: 15px;" :src="item"
              :preview-src-list="formData.replyImages">
            </el-image>
          </div>
        </el-form-item>
        <div style="display: flex;">
          <el-form-item label="经办人：">
            {{ formData.userName }}
          </el-form-item>
          <el-form-item label="办理结果：">
            <span> {{ formData.dealResult }}</span>
            <span v-if="formData.dealResult == '生成工单'" style="color: #29a5ff;cursor: pointer;"
              @click="goWorkOderDetail">（{{ formData.workOrderNumber }}）</span>
          </el-form-item>
          <el-form-item label="办理时间：">
            {{ formData.acceptTime }}
          </el-form-item>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
import MyUploadImgNotDetele from '@/components/upload/MyUploadImgNotDetele.vue'
export default {
  components: {
    MyUploadImgNotDetele
  },
  data() {
    return {
      scene: "",
      formData: {},
      eventWayData: [
        '', '来访', '呼叫中心', '内容人员反馈', '客户端', '其它渠道'
      ],
      replyData: {},
      UploadId: null,//上传图片的id
      ImgFileShow: false,
      needDeleteImgList: [],
      yysj: '',
    }
  },
  created() {

  },
  async activated() {

    let res = await this.$api.events.EventDetail(this.$route.query.id)
    this.formData = res.data
    this.UploadId = this.formData.id
    console.log(res.data, '事件详情');

    this.yysj = `${res.data.reservationDay ? res.data.reservationDay : ''} ${res.data.reservationInterval ? res.data.reservationInterval : ''}`

    this.ImgFileShow = false
    setTimeout(() => {
      this.ImgFileShow = true
    }, 100)
    if (this.formData.state == '1') {
      this.scene = '已处理'
    } else {
      this.scene = '未处理'
    }

    if (this.scene == '未处理') {
      this.$set(this.replyData, 'description', '')
      this.$set(this.replyData, 'imgs', [])
    } else {

    }

  },
  methods: {
    goBack() {
      if (this.scene == '未处理') {
        this.$confirm('返回后不保存，确认返回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/events/eventsManage')
        }).catch(() => {

        });
      } else {
        this.$router.push('/events/eventsManage')
      }

    },
    goWorkOderDetail() {
      this.$router.push(`/workOrder/workDetail?id=${this.formData.workOrderId}`)
    },
    updateClick() {
      // 如果已归档，不能修改 旧版判断条件，新版的受理事件会直接不显示按钮
      // if (this.formData.checkUpdate) {
      //   if (this.formData.eventWay == '4') {
      //     this.$message.error('客户端报事无法修改');
      //     return
      //   }
      //   if (this.formData.checkReply) {
      //     this.$message.error('事件已回复无法修改');
      //     return
      //   }
      //   this.$message.error('工单已回单或归档，不可修改！');
      //   return
      // } 
      if (!this.formData.checkUpdate) {
        this.$message.error('居民端报事不可修改');
        return
      }
      this.$router.push('/events/eventsAdd?type=update&id=' + this.$route.query.id)
    },
    deleteClick() {

      this.$confirm('此操作将删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.events.DeleteEvent({
          id: this.formData.id
        })
        if (res.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.$router.push('/events/eventsManage')
        } else {
          this.$message.error('删除失败，请联系管理员');
        }
      }).catch(() => {
      });
    },
    cancel() {
      this.$confirm('返回后不保存内容，确定返回吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$router.push('/events/eventsManage')
      }).catch(() => {

      });
    },
    goReply() {
      if (this.replyData.description == '' && this.replyData.imgs.length == 0) {
        this.$confirm('未填写回复内容，请填写后发送回复', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => { }).catch(() => { });
        return
      }
      this.$confirm('发送回复后，不可再修改事件，事件状态变为已处理，确认回复吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async () => {

        // 批量删除图片
        this.needDeleteImgList.forEach(async (el) => {
          let imgRes = await this.$api.ImgFile.delete(defaultUrl + '/business/events/deleteImg', {
            picName: el
          })
        })
        this.replyData.eventsId = this.$route.query.id
        let res = await this.$api.events.replyhhhh(this.replyData)
        if (res.code == 200) {
          this.$message({
            message: '回复成功',
            type: 'success'
          });
          // this.scene = '已处理'
          this.$router.push('/events/eventsManage')
        }
      }).catch(() => {

      });
    },
    goWorkOrder() {
      this.$confirm('是否进行事件派单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$router.push('/events/eventDispatch?eventId=' + this.$route.query.id)
      }).catch(() => {

      });
    },
    getImgList(e) {
      this.replyData.imgs = e
    },
    deleteImgList(e) {
      this.needDeleteImgList.push(e)
    }
  },

  deactivated() {
  },
}
</script>

<style lang="less" scoped>
.fromStyle {
  margin-top: 50px;
  width: 1000px;
}

// 所有的input宽度
.ok {
  width: 550px;
}

// 添加取消按钮
.btn {
 // margin-top: 50px;
 background-color: white;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px 1px #e1e1e1;
}
</style>